<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D导航</title>
    <style>
        body, ul ,li,a {
            list-style: none;
            padding: 0;
            margin: 0;
            text-decoration: none;
            color: white;
        }
        ul {
            display: block;
            height: 50px;
            background-color: #87ceeb; 
            text-align: center;
            margin: 200px auto;
            padding-left: 200px;

        }
        li {
            float: left;
            height: 50px;
            line-height: 50px;
            perspective: 300px; /* 透视距离 */
        }
        li a {
            display: block;
            padding: 0 50px;
        }
        .box {
            height: 50px;
            /* border: 1px solid red; */
            /* 子元素在3D状态下呈现 */
            transform-style: preserve-3d;
            transform-origin: 50% 50% -25px;

        }
        .front {
            background-color: #87ceeb;
        }
        .bottom {
            background-color: khaki;
            /* 修改旋转中心点 */
            transform-origin: top center;
            transform: rotateX(-90deg);
        }
        ul li:hover .box {
            transform-origin: 50% 50% -25px;
            transform: rotateX(90deg);
            transition: transform 1s;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <div class="box">
            <a href="" class="front">前端</a>
            <a href="" class="bottom">前端</a>
            </div>
        </li>
        <li>
            <div class="box">
            <a href="" class="front">前端开发</a>
            <a href="" class="bottom">前端开发</a>
            </div>
        </li>
        <li>
            <div class="box">
            <a href="" class="front">架构师</a>
            <a href="" class="bottom">架构师</a>
            </div>
        </li>
       <li>
            <div class="box">
            <a href="" class="front">关于我们</a>
            <a href="" class="bottom">关于我们</a>
            </div>
        </li>
    </ul>
</body>
</html>
